<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="css/index.css" />
</head>

<body>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		body {
			height: 2000px;
			background-image: linear-gradient(#fec892, #68acf0);
		}

		.rocket {
			width: 148.6px;
			height: 249px;
			background-image: url(./img/rocket_button_up.png);
			position: fixed;
			bottom: 0%;
			right: 10%;
		}

		.rocket:hover {
			background-position-x: -148.6px;
		}

		.active {
			animation: rocket 0.1s steps(3) infinite;
		}

		/* 在 -743 -297 之间切换帧动画 */
		@keyframes rocket {
			0% {
				background-position-x: -297px;
			}

			100% {
				background-position-x: -743px;
			}
		}
	</style>
	<div class="rocket">

	</div>
	<!--
			
			请实现问题4.gif的效果
			注意:
			1.鼠标移上去火箭时会变化
			2.火箭与滚动条同时到顶(动画时间为1s),并且动画完成后,火箭会回到原位
			3.火箭升空时,有动画切换以求达到真实感觉
			4.请使用img/rocket_button_up.png进行火箭切换
		-->

	<!--
			1.如何获取滚动条的高度  scrollTop
			2.如何获取火箭的高度offsetTop
			3.火箭的动画的切换
			4.滚动条移动到最顶端
			5.火箭移动到最顶端
			6.同时到达最顶端
		-->

	<!--
			火箭2.0版本(火箭的速度先快后慢,当body的scorllTop距离小于8%时,速度变快,并且火箭最终飞出顶部)
		-->
	<script>
		let rocket = document.querySelector(".rocket");
		let duration = 1000; // 1s 内完成
		let interval = 10; // 定时器每10ms执行一次

		rocket.addEventListener("click", () => {
			let scrollTop = parseInt(document.documentElement.scrollTop);
			let { offsetTop: rocket_ot, clientHeight: rocket_ch } = rocket;
			console.log(rocket_ot, rocket_ch);
			// 火箭需要偏移的总量 = 自身距离屏幕顶部距离 + 自身高度;
			let rocketGross = rocket_ot + rocket_ch
			// 添加帧动画
			rocket.classList.add("active");
			// 总量 / 总变化次数;
			let step = scrollTop / (duration / interval);
			let rocket_step = rocketGross / (duration / interval);
			let rocket_offset = 0;
			let timer = setInterval(() => {
				// 到达顶部清除定时器
				if (document.documentElement.scrollTop <= 0) {
					// 移除火箭动画
					rocket.classList.remove("active");
					// 重置火箭位置
					rocket.style.transform = 'translateY(0px)';
					clearInterval(timer);
					return
				}
				rocket_offset -= rocket_step;
				document.documentElement.scrollTop -= step;
				rocket.style.transform = `translateY(${rocket_offset}px)`
			}, interval);
		})

	</script>
</body>

</html>